<template>
  <el-table
    :data="tableData"
    v-loading="tableLoading"
    border
    style="width: 100%"
  >
    <el-table-column
      v-for="item in columns"
      :label="item.label"
      :prop="item.prop"
      :align="item.align ? item.align : 'center'"
      :width="item.width"
    >
      <template v-slot="{ row }">
        <slot :name="item.prop" :row="row">
          <!-- {{ row[item.prop] }} -->
          {{ getProp(row, item) }}
        </slot>
      </template>
    </el-table-column>
    <!-- <el-table-column :align="align" :label="actionLabel">
      <template v-slot="{ row }">
        <slot name="action" :row="row"></slot>
      </template>
    </el-table-column> -->
  </el-table>
</template>
<script setup>
//处理传递的属性名是xxx[0].xxx
let getProp = (row, item) => {
  let reg = /^(.+)\[(\d+)\]\.?(.*)$/;
  let matched = item.prop.match(reg);
  if (matched) {
    let arr = row[matched[1]];
    let prop = arr[matched[2]];
    let prop2 = prop[matched[3]];
    // console.log(arr, prop, prop2);
    return prop2;
  }
  return row[item.prop];
};
let props = defineProps({
  tableData: {
    type: Array,
  },
  columns: {
    type: Array,
  },
  tableLoading: {
    type: Boolean,
    default() {
      return false;
    },
  },
});
//使用方式
//给表格传递的属性
//1.tableData 表格对应的数据
//2.columns 每一列的属性描述，动态表头等
//columns 传递类型：数组[],属性：label:'表头'，prop:'数组对应的字段'，'width','align'
//插槽：通过指定 具名插槽 具名（同columns中的prop）,可以自定义表格的内容
</script>

<style scoped></style>
